<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*body{
            height:10000px;
        }*/
        .box{
            /*width: 33.33vw;*/
            /*height: 33.33vh;*/
            background-color: red;
        }
    </style>
</head>
<body>
<input type = "text">
<div class = "box">你好</div>
<script>
    /*
    * 事件系统：
    *   点击事件
    *   onclick
    *
    *   加载事件
    *   onload
    *
    * 一般都写 window.onload = window.onresize = function(){}，两者是密不可分的
    *
    *   onresize 事件 浏览器调整宽高的时候出发的事件
    *       我们可以在这个事件触发时修改元素的大小，做自适应
    *       自适应：根据不同的尺寸，发送不同的页面
    *             当页面大小变化到 > 600的时候跳转到大的页面
    *             当页面大小变化到 < 600的时候跳转到小的页面
    *
    *       响应式：一个页面可以响应不同大小，自适应和响应式是有区别的
    *
    *   onscroll 滚动事件
    *
    *   oncopy 事件
    *
    *   键盘事件：
    *       任何键盘按下操作都会触发的事件
    *
    *   onkeydown 键盘按下事件
    *
    *   onkeyup 键盘抬起事件
    *
    *   鼠标事件：
    *
    *   onclick 点击一下鼠标左键（抬起的时候触发）
    *
    *   oncontextmenu 鼠标右键点击事件（可以用来做自定义菜单栏，将系统菜单栏禁用，自己设置一个菜单栏）
    *
    *   //以下三个鼠标事件可以组合到一起使用，模拟拖动元素操作
    *   onmousedown 鼠标按下
    *
    *   onmousemove 鼠标移动
    *
    *   onmouseup 鼠标抬起
    *
    *   //以下两个鼠标事件可以结合起来做选中和高亮，做定制化的操作
    *   onmouseenter 鼠标进入事件
    *
    *   onmouseleave 鼠标移出事件
    *
    *
    *   onwheel 鼠标滚轮事件
    *
    *   事件之多难以一一讲解，所以只需要从一个事件出发，就可以推导其他事件，所有的事件都是共通的
    *
    *
    * */
    let input = document.querySelector("input")
    input.onblur = function (){ //失去焦点事件
        this.value += !
        console.log("失去焦点")
    }
    input.onfocus = function (){ //聚焦事件
        this.value = "@" + this.value
    }

    let box = document.querySelector(".box")
    let count = 0 //计算事件触发的次数
    //window.onload = function (){ //浏览器刷新的那一瞬间计算并更新元素宽高
    //    box.style.width = window.innerWidth / 3 + "px"
    //    box.style.height = window.innerHeight / 3 + "px"
    //}
    //因为两个事件的代码相同，可以进行这样的优化
    window.onload = window.onresize = function (){ //浏览器视口变动时也计算更新元素宽高
        console.log(count++)
        box.style.width = window.innerWidth / 3 + "px"
        box.style.height = window.innerHeight / 3 + "px"
        console.log(window.innerWidth,window.innerHeight)
    }
    //a等于b等于3的返回值 a = (b = 3)
    a = b = 3 //就是上面连等号的省略

    window.onscroll = function (){
        console.log("滚动了")
    }

    document.oncopy = function (){
        alert("以下操作需要花钱体验")
        return false
    }

    //如何将键盘按下和抬起事件成对出现
    let isDown = false //设置一个标记，默认值为false

    window.onkeydown = function (){
        if(isDown) return //如果键盘按下时标记为true，直接退出函数
        isDown = true //如果函数没有触发上面的if条件，就执行这里的代码，将标记改成true
        console.log("键盘被按下")
    }

    window.onkeyup = function (){
        isDown = false //重新将标记改成false
        console.log("键盘被抬起")
    }
    //但是上述操作会有bug，在多个按键被按下时就只触发了一次按下事件，所以需要针对每一个按键，去设置独立的按键状态


    box.onclick = function (){
        console.log("click")
    }

    box.oncontextmenu = function (e){
        e.preventDefault() //阻止默认操作，这样鼠标右键按下时系统菜单栏就不会出现了
        console.log("右键点击这个盒子")
    }

    //模拟元素被拖动的效果
    let drag = false //设置一个标记，默认为false，这样鼠标在刚开始的时候才不会一直触发拖动状态
    box.onmousedown = function (){
        drag = true //当元素被按下时将drag改成true
        console.log("抓住")
    }

    box.onmousemove = function (){
        if(drag){ //只有drag为true才触发以下代码
            console.log("拖动")
        }

    }

    window.onmouseup = function (){ //鼠标抬起事件写到window上能保证该事件无论在何处位置绝对都能被触发
        drag = false //最后将drag改回false
        console.log("放下")
    }
    //以上模拟元素拖动也有个小bug，在鼠标在元素区域内按下后，拖动鼠标移出元素区域，抬起鼠标，拖动会一直触发，但是抬起却不触发
    //这是因为我们把鼠标抬起的事件写窄了，不应该写在box元素上面，应该把鼠标抬起事件写在window上，这样标记就不会一直为true


    box.onmouseenter = function (){
        box.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8)
        console.log("鼠标进入")
    }

    box.onmouseleave = function (){
        box.style.backgroundColor = "blue"
        console.log("鼠标移出")
    }

    box.onwheel = function (){ //只要鼠标在元素区域内滚动滚轮就会触发
        box.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8)
        console.log("滚轮滚")
    }

</script>
</body>
</html>